<extend name="./Application/Admin/View/Public/base.html" />
<block name="eosi-css">
    <link href="__PUBLIC__/assets/css/daterangepicker.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/iconfont.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/rili.css" rel="stylesheet">
    <link href="__PUBLIC__/assets/css/fileUpload.css?v=11" rel="stylesheet">
</block>
<block name="eosi-js"> <script
    src="__PUBLIC__/assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        var $path_base = "/";//this will be used in gritter alerts containing images
    </script>
</block>
<block name="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-header header-color-blue">
                            <h5 class="lighter">
                                上传图片抠底去背<span class="red">(带*为必填项)</span>
                            </h5>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <form class="form-horizontal"  name="saveForm" id="saveForm"  method="post"  action="{:U('insertRule')}"  encType="multipart/form-data">
                                    <table class="table table-striped table-bordered table-hover">
                                        <tbody>
                                           
                                            <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>上传一张待去背的图片<span class="red">*</span></small></label>
                                                </td>
                                                <td>
                                                    <img style="display: none; height:320px" id="img" name="img">
                                                    <input type="file" name="p_img" id="p_img">
                                                    <span class="middle control-label red">&nbsp;&nbsp;图片建议：尽量确保待去背的颜色为纯色</span>
                                                    <input type="hidden" id="p_new_pic" name="p_new_pic">
                                                    <iframe style="display: none;" id="upload_img" name="upload_img"></iframe>
                                                </td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                    <table class="table table-striped table-bordered table-hover" id="answer">
                                        <tbody>
                                            <tr>
                                                <td class="no-padding-right" width="15%">

                                                </td>
                                                <td>
                                                    <button class="btn btn-success" type="button" style="cursor: pointer;" onclick="checkSubmit();">
                                                        <i class="icon-ok bigger-110"></i>
                                                        点击开始去背
                                                    </button>
                                                    <!-- <button class="btn btn-warning" type="button" style="cursor: pointer;" onclick="returnButton({});">
                                                        <i class="icon-undo bigger-110"></i>
                                                        返回
                                                    </button> -->
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table id="table_img_after_matting" class="table table-striped table-bordered table-hover" style="display:none;">
                                        <tbody>
                                           
                                            <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>去背结果:</small></label>
                                                </td>
                                                <td>
                                                    <img style="height:320px" id="img_after_matting" name="img_after_matting">
                                                    <span id="errMsg" style="color:red;"></span>
                                                </td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.row -->
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/fileUpload.js"></script>
    <script type="text/javascript">
        // var upload_session_key= Date.parse(new Date());
        // $("#fileUploadContent").initUpload({
        //                 "uploadUrl":"/Admin/CloserCommodity/upload",//上传文件信息地址
        //                 // "progressUrl":"/Admin/CloserCommodity/uploadProgress",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
        //                 "showSummerProgress":false,//总进度条，默认限制
        //                 //"size":350,//文件大小限制，单位kb,默认不限制
        //                // "maxFileNumber":3,//文件个数限制，为整数
        //                 // "filelSavePath":"__PUBLIC__/Uploads/",//文件上传地址，后台设置的根目录
        //                 "beforeUpload":beforeUploadFun,//在上传前执行的函数
        //                 "onUpload":onUploadFun,//在上传后执行的函数
        //                 "onDeleteSingle":onDeleteSingle,
        //                 autoCommit:true,//文件是否自动上传
        //                 //"fileType":['png','jpg','docx','doc']//文件类型限制，默认不限制，注意写的是文件后缀
        //             })
        // function beforeUploadFun(opt){
        //     // opt.otherData =[{"session_key":upload_session_key}];
        //     opt.otherData =[{"name":"session_key","value":upload_session_key}];
        //     // console.log(opt);
        // }
        // function onUploadFun(opt,data){
        //     // console.log(data);
        //     // console.log(data.info);
        //     $("#new_img").val(data.info);
        //     uploadTools.initWithCleanFile(opt);
        //     uploadTools.initWithUpload(opt);//初始化上传
        //     uploadTools.initWithSelectFile(opt);//初始化选择文件
        //     // uploadTools.uploadError(opt);//显示上传错误
            
        //     var realNames = data.info.split(",");
        //     for (var i = realNames.length - 1; i >= 0; i--) {
        //         $("#fileUploadItemperry"+i).attr("fileServerName",realNames[i]);
        //     }
        // }
        // function onDeleteSingle(opt,realName){
            
        //     var realNames = $("#new_img").val().split(",");
        //     var newNames= new Array();
        //     for (var i = 0; i <=realNames.length - 1; i++) {
        //         if(realNames[i]!=realName){
        //             newNames.push(realNames[i]);
        //         }
                
        //     }
        //     newNames=newNames.join(',');
        //     $("#new_img").val(newNames);
        //     var formData = new FormData();
        //     formData.append("realName",realName);
        //     formData.append("session_key",upload_session_key);
        //     $.ajax({
        //         type:"post",
        //         url:"/Admin/CloserCommodity/uploadDelete",
        //         data:formData,
        //         processData : false,
        //         contentType : false,
        //         success:function(data){
                    
        //         },
        //         error:function(e){

        //         }
        //     });

            

        // }
        var checkSubmitClicked=0;
        jQuery(function ($) {
            //提交Form
            checkSubmit = function () {
                if(checkSubmitClicked){
                    alert('请稍后，前次操作还未处理完')
                    return;
                }
                checkSubmitClicked=1;
                var p_new_pic = $("#p_new_pic").val();
                if(p_new_pic == ''){
                    art.dialog.tips("请先上传一张待去背图片。");
                    return false;
                }
                var  p_new_pic=$("#p_new_pic").val();
                var formData = new FormData();
                formData.append("img_name",p_new_pic);
                $("#errMsg").hide();
                $.ajax({
                    type:"post",
                    url:"/Admin/ImageMatting/matt_image",
                    data:formData,
                    processData : false,
                    contentType : false,
                    success:function(data){
                        var dataObj=eval("("+data+")");
                        console.log(dataObj.succ)
                        console.log(dataObj.datas)
                        if(dataObj.succ==1){
                            $("#img_after_matting").attr("src",dataObj.datas);
                            $("#table_img_after_matting").show();
                        }
                        else {
                            $("#table_img_after_matting").hide();
                            $("#errMsg").html(dataObj.datas);
                            $("#errMsg").show();
                        }
                    },
                    error:function(e){
                    },
                    complete:function(xhr,ts){
                        checkSubmitClicked=0;
                    }
                });


            }
            
        });
        $("#p_img").change(function() {
                $("#saveForm").attr('action', "{:U('uploadImg')}");
                $("#saveForm").attr('target', 'upload_img');
                $("#saveForm").submit();
            });
    </script>
</block>